<template>
  <div class="filter-container">
    <div class="filter-item">
      <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent>
        <!-- <el-form-item label="求职城市">
          <CitySelect @childByValue="setCity"></CitySelect>
        </el-form-item>

        <el-form-item label="性别" class="inline">
          <SexSelect @childByValue="setSex"></SexSelect>
        </el-form-item>

        <el-form-item label="工作经验" class="inline">
          <WorkExp @childByValue="setWorkExp"></WorkExp>
        </el-form-item>

        <el-form-item label="学历" class="inline">
          <Education @childByValue="setEducation"></Education>
        </el-form-item>

        <el-form-item label="薪资要求" class="inline">
          <el-select v-model="form.salary" placeholder="请选择">
            <el-option
              v-for="item in salaryList"
              :key="item.value"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="求职状态" class="inline">
          <el-select v-model="form.jobstatus" placeholder="请选择">
            <el-option
              v-for="item in jobstatusList"
              :key="item.value"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="职位类别" class="inline">
          <el-select v-model="form.postType" placeholder="请选择" clearable>
            <el-option
              v-for="item in postTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      <el-form-item class="inline">
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>


      </el-form>
    </div>
  </div>
</template>

<script>
  import CitySelect from '@/components/CitySelect/'
  import SexSelect from '@/components/SexSelect/'
  import WorkExp from '@/components/WorkExp/'
  import Education from '@/components/Education/'

  import {fetchList, fetchTreeList} from "../../../../api/web/dictionary";

  export default {
    components: {CitySelect, SexSelect, WorkExp, Education},
    name: "Index",
    props: {
      stateType: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        form: {
          sexId: '',
          workexperience: '',
          education: '',
          salary: '',
          jobstatus: '',
          postType: ''
        },
        workexperienceList: [],
        educationList: [],
        salaryList: [],
        jobstatusList: [],
        options2: [{
          label: '江苏',
          cities: []
        }, {
          label: '浙江',
          cities: []
        }],
        props: {
          label: 'name',
          value: 'id',
          children: 'children'
        },
        postTypeList: [],
        value: ''
      }
    },
    methods: {
      setCity(val) {
        this.form.areaCode = val
      }, 
      setSex(val) {
        this.form.sexId = val
      }, 
      setWorkExp(val) {
        this.form.workexperience = val
      }, 
      setEducation(val) {
        this.form.education = val
      },
      query(){
        this.$emit('query', this.form.postType)
      },
      getPostInfos () {
        this.$fetch(this.$api.postInfos, {
          stateType: this.stateType
        }).then(res => {
          this.postTypeList = res.data
        })
      }
    },
    created() {
      this.getPostInfos()
    },
    watch: {
      stateType () {
        this.getPostInfos()
      }
    }
  }
</script>

<style scoped>
  .el-form-item.inline {
    display: inline-block;
  }
</style>
